<template>
  <div id="app">
    <!--侧边导航栏-->
    <nav class="nav">
      <router-link to="/">主页</router-link>  
      <router-link to="/water" @click="togglePanelwater" :class="{ 'active': isPanelOpenwater } ">
        低压水系统
        <span v-if="isPanelOpenwater" class="arrow">&#9660;</span>
        <span v-else class="arrow">&#9650;</span>
      </router-link>
      <div class="zhedie" v-show="isPanelOpenwater">
        <router-link to="/water/waterhistory" class="link">实时显示</router-link>
        <!-- <router-link to="/water/watercurve" class="link">报警记录</router-link> -->
      </div>
      <router-link to="/fuel" @click="togglePanelFuel" :class="{ 'active': isPanelOpenFuel }">
       高压水系统
        <span v-if="isPanelOpenFuel" class="arrow">&#9660;</span>
        <span v-else class="arrow">&#9650;</span>
      </router-link>
      <div class="zhedie" v-show="isPanelOpenFuel">
        <router-link to="/fuel/fuelhistory" class="link">实时显示</router-link>
        <!-- <router-link to="/fuel/fuelcurve" class="link">报警记录</router-link> -->
      </div>
      <router-link to="/fluid" @click="togglePanelFluid" :class="{ 'active': isPanelOpenFluid }">
        液压系统
        <span v-if="isPanelOpenFluid" class="arrow">&#9660;</span>
        <span v-else class="arrow">&#9650;</span>
      </router-link>
      <div class="zhedie" v-show="isPanelOpenFluid">
        <router-link to="/fluid/fluidhistory" class="link">实时显示</router-link>
        <!-- <router-link to="/fluid/fluidcurve" class="link">报警记录</router-link> -->
      </div>
      <router-link to="/about" @click="togglePanelabout" :class="{ 'active': isPanelOpenabout }">
        滑油系统
        <span v-if="isPanelOpenabout" class="arrow">&#9660;</span>
        <span v-else class="arrow">&#9650;</span>
      </router-link>
      <div class="zhedie" v-show="isPanelOpenabout">
        <router-link to="/about/abouthistory" class="link">实时显示</router-link>
        <!-- <router-link to="/about/aboutcurve" class="link">报警记录</router-link> -->
      </div>
      <router-link to="/air" @click="togglePanelAir" :class="{ 'active': isPanelOpenAir }">
        高压空气系统
        <span v-if="isPanelOpenAir" class="arrow">&#9660;</span>
        <span v-else class="arrow">&#9650;</span>
      </router-link>
      <div class="zhedie" v-show="isPanelOpenAir">
        <router-link to="/air/airhistory" class="link">实时显示</router-link>
        <!-- <router-link to="/air/airpage3" class="link">报警记录</router-link> -->
      </div>
      <router-link to="/on-off/on-offreport" @click="togglePanelon_off" :class="{ 'active': isPanelOpenon_off }">
        报表生成打印
        <span v-if="isPanelOpenon_off" class="arrow">&#9660;</span>
        <span v-else class="arrow">&#9650;</span>
      </router-link>
      <div class="zhedie" v-show="isPanelOpenon_off">
        <!-- <router-link to="/on-off/on-offhistory" class="link">历史记录</router-link>
        <router-link to="/on-off/on-offcurve" class="link">曲线显示</router-link>
        <router-link to="/on-off/on-offpage3" class="link">参数设置</router-link> -->
        <!-- <router-link to="/on-off/on-offreport" class="link">表格打印</router-link> -->
      </div>
      
    </nav>
    <router-view :key="$route.fullPath" />
  </div>
</template>
<script>
import router from './router';

export default {
  data() {
    return {
      isPanelOpenwater: false,
      isPanelOpenFuel: false,
      isPanelOpen: false,
      isPanelOpenFluid: false,
      isPanelOpenabout: false,
      isPanelOpenon_off: false,
      isPanelOpenAir : false,
    };
  },
  methods: {
    togglePanelwater() {
      this.isPanelOpenwater = !this.isPanelOpenwater;
      this.isPanelOpenFuel = false;
      this.isPanelOpen = false;
      this.isPanelOpenFluid = false;
      this.isPanelOpenabout = false;
      this.isPanelOpenon_off = false;
      this.isPanelOpenAir = false;
    },
    togglePanelFuel() {
      this.isPanelOpenFuel = !this.isPanelOpenFuel;
      this.isPanelOpenwater = false;
      this.isPanelOpen = false;
      this.isPanelOpenFluid = false;
      this.isPanelOpenabout = false;
      this.isPanelOpenon_off = false;
      this.isPanelOpenAir = false;
    },
    togglePanel() {
      this.isPanelOpen = !this.isPanelOpen;
      this.isPanelOpenFuel = false;
      this.isPanelOpenWater = false;
      this.isPanelOpenFluid = false;
      this.isPanelOpenAir = false;
      this.isPanelOpenAbout = false;
      this.isPanelOpenon_off = false;
      this.isPanelOpenAir = false;
    },
    togglePanelFluid() {
      this.isPanelOpenFluid = !this.isPanelOpenFluid;
      this.isPanelOpenFuel = false;
      this.isPanelOpenWater = false;
      this.isPanelOpen = false;
      this.isPanelOpenabout = false;
      this.isPanelOpenon_off = false;
      this.isPanelOpenAir = false;
    },
    togglePanelabout() {
      this.isPanelOpenabout = !this.isPanelOpenabout;
      this.isPanelOpenFuel = false;
      this.isPanelOpenWater = false;
      this.isPanelOpenFluid = false;
      this.isPanelOpen = false;
      this.isPanelOpenon_off = false;
      this.isPanelOpenAir = false;
    },
    togglePanelon_off() {
      this.isPanelOpenon_off = !this.isPanelOpenon_off;
      this.isPanelOpenFuel = false;
      this.isPanelOpenWater = false;
      this.isPanelOpenFluid = false;
      this.isPanelOpen = false;
      this.isPanelOpenabout = false;
      this.isPanelOpenAir = false;
    },
    togglePanelAir() {
      this.isPanelOpenAir = !this.isPanelOpenAir;
      this.isPanelOpenFuel = false;
      this.isPanelOpenWater = false;
      this.isPanelOpenFluid = false;
      this.isPanelOpenAbout = false;
      this.isPanelOpen = false;
      this.isPanelOpenword = false;
    },
  }
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #9bbdf0;
}

nav {
  width: 9vw;
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  background: #9bbdf0;
  position: absolute;
  margin-top: -10px;
  margin-left: -10px;

  a {
    font-weight: bold;
    color: #000000;
    padding: 10px;
    font-size: 14px;
    text-align: center;

    &.router-link-exact-active {
      color: rgb(255, 255, 255);
      background-color: #03c859;
    }
  }

  .link {
    display: block;
    text-decoration-line: none;
  }
}
</style>
